<template>
   <el-row class="home" :gutter="20">
       <el-col :span="24" style="margin-top: 80px">
         <el-col :span="6">
           <el-card shadow="hover">
               <div class="user">
                   <img :src="userImg" style="width: 120px" />
               <div class="userinfo">
               <p class="name">账号：user</p>
               <!-- <p class="access">系统管理员</p> -->
               </div>
           </div>
           <div class="login-info">
               <p>欢迎使用服装店销售管理系统！</p>
               <p>点击右上角头像可切换账号登录。</p>
               <!-- <p>上次登录地点: <span>广州天河</span></p> -->
           </div>
           </el-card>
          </el-col>
          <el-col :span="17">
           <div>
              <div ref="main2" style="width: 600px;height: 650px;margin: 0 auto;" />
            </div>
          </el-col>
            <!-- <el-col :span="24">
           <div>
              <div ref="main1" style="width: 600px;height: 650px;margin: 0 auto;" />
            </div>
             </el-col> -->
       </el-col>
   </el-row>
</template>
<script>
import { getCountByCategoryPieData,getCountByclNamePieData } from '@/api/report'
export default {
   name: 'home',
   data(){
       return{
           userImg:require('../../assets/images/user.png'),
      }
   },
   created() {
    this.getReportClothesList();
  },
  mounted() {
    getCountByCategoryPieData().then((response) => {
      const pieData = response.data
      this.initCateEcharts(pieData)
    })
    getCountByclNamePieData().then((response) => {
      const pieData = response.data
      this.initclNameEcharts(pieData)
    })
  },
  methods: {
    getReportCateList() {
      this.loading = true;
      listReportCate().then((response) => {
        this.reportCateList = response.data;
        this.loading = false;
      })
    },
    getReportClothesList() {
      this.loading = true;
      listReportClothesByPage(this.queryParams).then((response) => {
        this.reportClothesList = response.data.list;
        this.total = response.data.total;
        this.pageNum = response.data.pageNum;
        this.pageSize = response.data.pageSize;
        this.loading = false;
      })
    },
    initCateEcharts(pieData) {
      var myChart = this.$echarts.init(this.$refs.main1)
      var option = {
        title: {
          text: '服装店品类销售报表',
          subtext: '按类别对销量进行统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [{
          name: '占所有服饰的',
          type: 'pie',
          radius: '50%',
          data: pieData,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      }
      option && myChart.setOption(option)
    },
    initclNameEcharts(pieData) {
      var myChart = this.$echarts.init(this.$refs.main2)
      var option = {
        title: {
          text: '各服饰销售报表',
          subtext: '按服饰ID对销量进行统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [{
          name: '占所有服饰的',
          type: 'pie',
          radius: '50%',
          data: pieData,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      }
      option && myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
  .card-panel-num1 {
    font-size: 30px;
    color: #40c9c6;
  }
  .card-panel-num2 {
    font-size: 40px;
    color: #eb0f0f;
  }
  .mb8 {
    margin-bottom: 8px;
  }
</style>